<template>
	<view>
		<view class="mid-par">
			<view class="o-list">
				<view class="o-item" v-for="(item,index) in content.orders[0].orderItems" :key="index" :item-id="index"
					:data-skuid="item.skuId">

					<view class="img"
						:style="{background:img?('url('+baseUrl+ item.thumbnail +') center no-repeat'):'',backgroundSize:'cover'}">

					</view>
					<view class="int">
						<view class="t1">
							{{item.name}}
						</view>
						<view class="t2">
							重量：{{item.weight}}G
						</view>
						<view class="t3">
							¥{{item.price}}
						</view>
					</view>
					<view class="cp-num">
						x {{item.quantity}}
					</view>
				</view>

			</view>
		</view>

		<view class="order-infor">
			<view class="item">
				<view class="left">商品总价</view>
				<view class="right">¥ {{content.orders[0].price}}</view>
			</view>
			<view class="item">
				<view class="left">店铺优惠 </view>
				<view class="right">¥ {{content.orders[0].couponDiscount}}</view>
			</view>
			<view class="item" v-if="content.fee>0">
				<view class="left">手续费 </view>
				<view class="right">¥ {{content.fee}}</view>
			</view>
			<!-- <view class="item" v-if="content.freight>0">
				<view class="left">运费 </view>
				<view class="right">¥ {{content.orders[0].freight}}</view>
			</view> -->
			<view class="item">
				<view class="left">合计 </view>
				<view class="right">¥ {{content.amount}}</view>
			</view>
		</view>

		<view class="order-infor">
			<view class="item">
				<view class="left">付款方式 </view>

				<!-- <picker class="right" @change="bindPickerChange" :value="payindex" :range="content.paymentMethods"
					:range-key="'name'">
					<view class="uni-input">{{content.paymentMethods[payindex].name}}</view>
				</picker> -->
				<view>微信支付</view>
			</view>
		</view>

		<view class="bottom_total">
			<view class="left">
				待支付：<text>¥ {{content.amount}}</text>
			</view>
			<view class="right" @click="pay">
				立即支付
			</view>
		</view>

	</view>
</template>

<script>
	import {
		checkout,
		create,
		toPay,
		orderPayment
	} from '@/api/order.js';
	import {
		getReceiver
	} from '@/api/user.js';
	export default {
		data() {
			return {
				baseUrl: this.$baseUrl,
				img: '../../static/images/cp10.png',
				content: '',
				payindex: 0,
				cartItemIds: '',
				skuId: '',
				quantity: '',
				sn: ''
			};
		},
		onLoad(option) {
			this.sn = option.sn
			this.init()
		},
		methods: {
			init() {
				let data = {
					orderSns: [this.sn]
				}
				orderPayment(JSON.stringify(data)).then(res => {
					this.content = res.data
					this.paymentPluginId = res.data.defaultPaymentPlugin.id
				})
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.payindex = e.detail.value
				this.paymentPluginId = this.content.paymentMethods[this.payindex].paymentPluginId
			},
			pay() {
						var openid = uni.getStorageSync('openid');
						toPay({
							// paymentPluginId: this.paymentPluginId.toString(),
							paymentPluginId: 'weixinAppletPaymentPlugin',
							orderSns: this.sn,
							openid: openid
						}).then(res => {
							console.log(res)
							if (res.message == '操作成功') {
								uni.requestPayment({
									provider: 'wxpay',
									timeStamp: res.data.timeStamp,
									nonceStr: res.data.nonceStr,
									package: res.data.package,
									signType: res.data.signType,
									paySign: res.data.paySign,
									success: function(infoRes) {
										if (infoRes.errMsg == "requestPayment:ok") {
											uni.showToast({
												title: '支付成功',
												duration: 2000,
												icon: 'none'
											})
											uni.redirectTo({
												url: '/pages/order/order?type=PENDING_SHIPMENT'
											})
										}
										console.log('success:' + JSON.stringify(infoRes));
									},
									fail: function(err) {
										uni.showToast({
											title: err.errMsg,
											icon: 'error'
										})
										setTimeout(() => {
											uni.navigateTo({
												url: '/pages/order/order?type='
											})
										}, 800)
									}
								});
							}
						})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.user-infor {
		// padding: 40rpx 20rpx;
		margin-top: 30rpx;
		background-color: #ffffff;

		.tit {
			font-size: 28rpx;
			font-weight: bold;
			padding: 30rpx;
			border-bottom: 1px solid #ebebeb;
		}

		.flex-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 40rpx 30rpx;

			.icon {
				width: 35rpx;
			}
		}

	}


	.user-infor .left {
		flex: 1;
		width: 100%;

		padding-left: 60rpx;
	}

	.user-infor .left .t1 {
		font-size: 24rpx;
		margin-bottom: 10rpx;
		color: #595757;
	}

	.user-infor .left .t2 {
		font-size: 24rpx;
		color: #595757;
		line-height: 1.5;
	}

	.user-infor .right {
		position: relative;
		margin-left: 120rpx;
	}

	.user-infor .right::after {
		content: '';
		display: block;
		position: absolute;
		border-top: 1px solid #666666;
		border-right: 1px solid #666666;
		transform: rotate(45deg);
		right: 8px;
		width: 10px;
		height: 10px;
	}

	.mid-par {
		margin-top: 30rpx;
		background-color: #ffffff;
		padding: 0 30rpx;

		.o-list {
			.o-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx 0;

				.img {
					width: 160rpx;
					height: 160rpx;
				}

				.int {
					flex: 1;
					padding: 0 30rpx;

					.t1 {
						font-size: 24rpx;
						color: #1a1a1a;
						margin-bottom: 20rpx;
					}

					.t2 {
						font-size: 28rpx;
						color: #898989;
						margin-bottom: 45rpx;
					}

					.t3 {
						color: #898989;
						font-size: 28rpx;
					}
				}

				.cp-num {
					font-size: 28rpx;
					color: #898989;
				}
			}
		}
	}

	.order-infor {
		background-color: #ffffff;
		padding: 0 30rpx;

		margin-top: 30rpx;
	}

	.order-infor .item {
		border-bottom: 1px solid #f5f5f5;
		padding: 40rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #1a1a1a;
	}

	.bottom_total {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 110rpx;
		width: 100%;
		background-color: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;

		.left {
			padding-left: 30rpx;

			text {
				color: #b81c22;
				font-size: 32rpx;
			}
		}

		.right {
			color: #ffffff;
			letter-spacing: 4rpx;
			width: 300rpx;
			text-align: center;
			height: 110rpx;
			line-height: 110rpx;
			background-color: #b81c22;
		}
	}
</style>
